<template>
  <div class="tab-bar">
    <div class="tab" :class="{active: tab===item.id}" @click="changeTab(item)" v-for="(item, index) in list" :key="index">
      <img class="pic" :src="item.icon" alt="">
      <p class="text ">{{item.text}}</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          icon: '/static/images/calendar.png',
          path: '/',
          text: '日历 calendar'
        },
        {
          id: 2,
          icon: '/static/images/patriarch.png',
          path: '/mine',
          text: '我的 mine'
        }
      ],
      tab: 1
    }
  },
  methods: {
    changeTab (item) {
      this.$router.push(item.path)
      this.tab = item.id
    }
  }
}
</script>
<style lang="less">
.tab-bar{
  width: 100%;
  background: ghostwhite;
  height: 2rem;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  .tab{
    flex: 1;
    border-top: 1px solid #ccc;
    position: relative;
    &.active{
      &:after{
        content: '';
        position: absolute;
        width: .8rem;
        height: .8rem;
        background: rgba(255, 192, 203, .5);
        top: 10%;
        left: 50%;
        border-radius: 100%;
        transform: translate(-50%, 0)
      }
    }
    .pic{
      width: .8rem;
      height: .8rem;
    }
    .text{
      font-size: .4rem;
      // color: #de7a62;
    }
  }
}
</style>